{# vim: set et ts=8 sts=4 sw=4 ai: #}
{% macro heading(name) %}
{%if (in_help) %}
<h3 id="{{name|lower}}">{{ name }}<a href="#{{name|lower}}" class="anchor"><i class="fas fa-link"></i></a></h3>
{%else%}
<h4>{{ name }}</h4>
{% endif %}
{% endmacro %}

{{ heading("Emphasis") }}
<div class="row mb-10">
<div class="col-md-6 col-sm-12">
<pre class="block-compact">**<strong>bold</strong>**
*<em>italics</em>*
~~<strike>strikethrough</strike>~~
==<mark>mark</mark>==
</pre>
</div>
<div class="col-md-6 col-sm-12 pl-5">
<strong>bold</strong><br/>
<em>italics</em><br/>
<strike>strikethrough</strike><br/>
<mark>mark</mark>
</div>
</div>
You can use backslash escapes to generate literal characters that are used for formatting otherwise, e.g.
<div class="row">
<div class="col-md-6 col-sm-12">
<pre class="block-compact">
\*literal asterisks\*
</pre>
</div>
<div class="col-md-6 col-sm-12 pl-5">
*literal asterisks*
</div>
</div>

{{ heading("Headings") }}

<div class="row align-bottom my-5">
<div class="col-md-6 col-sm-12 align-bottom"><code># h1 - Large header</code></div>
<div class="col-md-6 col-sm-12"><h1 class="p-0 m-0">h1 - Large Header</h1></div>
</div>
<div class="row align-bottom my-5">
<div class="col-md-6 col-sm-12 align-bottom"><code>## h2 - Medium header</code></div>
<div class="col-md-6 col-sm-12"><h2 class="p-0 m-0">h2 - Medium Header</h2></div>
</div>
<div class="row align-bottom my-5">
<div class="col-md-6 col-sm-12 align-bottom"><code>### h3 - Small header</code></div>
<div class="col-md-6 col-sm-12"><h3 class="p-0 m-0">h3 - Small Header</h3></div>
</div>
<div class="row align-bottom my-5">
<div class="col-md-6 col-sm-12 align-bottom"><code>#### h4 - Tiny header</code></div>
<div class="col-md-6 col-sm-12"><h4 class="p-0 m-0">h4 - Tiny Header</h4></div>
</div>
</table>
{{ heading("Lists") }}
<div class="row">
<div class="col-md-6 col-sm-12">
<pre class="block-compact">- Generic list items
- in an unordered list</pre>
</div>
<div class="col-md-6 col-sm-12" style="padding-left:3rem;">
<ul class="p-0 m-0">
  <li class="p-0 m-0">Generic list items</li>
  <li class="p-0 m-0">in a unordered list</li>
</ul>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-6 col-sm-12">
<pre class="block-compact">1. List items
2. in an ordered list
3. numbered with numbers</pre>
</div>
<div class="col-md-6 col-sm-12" style="padding-left:3rem;">
<ol class="p-0 m-0">
  <li class="p-0 m-0">List items</li>
  <li class="p-0 m-0">in an ordered list</li>
  <li class="p-0 m-0">numbered with numbers</li>
</ol>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-6 col-sm-12">
<pre class="block-compact">1. Numbered list with
    - a nested
    - unordered list
2. inside</pre>
</div>
<div class="col-md-6 col-sm-12" style="padding-left:3rem;">
<ol class="p-0 m-0">
  <li class="p-0 m-0">Numbered list with
    <ul class="p-0 pl-20 m-0">
      <li class="p-0 m-0">a nested</li>
      <li class="p-0 m-0">unordered list</li>
    </ul>
  </li>
  <li class="p-0 m-0">inside</li>
</ol>
</div>
<p class="mt-0 pt-0"><em>Note: To create nested sublists, they must be indented the same number of spaces that a paragraph would need to be in order to be included in the list item. In other words, sublist markers must match the indentation of the content of the outer list items.</em></p>
</div>

{{ heading("Links") }}
<div class="row">
<div class="col-md-6 col-sm-12">
<pre class="block-compact text-wrap">[[WikiPage]]</pre>
</div>
<div class="col-md-6 col-sm-12 pl-5">
<a href="#">WikiPage</a>
</div>
</div>

<div class="row">
<div class="col-md-6 col-sm-12">
{% if config.WIKILINK_STYLE.upper() == "LINKTITLE" %}
<pre class="block-compact text-wrap">[[WikiPage|Text to display]]</pre>
{% else %}
<pre class="block-compact text-wrap">[[Text to display|WikiPage]]</pre>
{% endif %}
</div>
<div class="col-md-6 col-sm-12 pl-5">
  <a href="#">Text to display</a>
</div>
</div>

<div class="row">
<div class="col-md-6 col-sm-12">
<pre class="block-compact text-wrap">http://www.example.com</pre>
</div>
<div class="col-md-6 col-sm-12 pl-5">
  <a href="#">http://example.com</a>
</div>
</div>

<div class="row">
<div class="col-md-6 col-sm-12">
<pre class="block-compact text-wrap">[Link with text](http://example.com)</pre>
</div>
<div class="col-md-6 col-sm-12 pl-5">
  <a href="#">Link with text</a>
</div>
</div>
{% if config.WIKILINK_STYLE.upper() == "LINKTITLE" %}
<p><em>Note: WikiLink-Style is in compatibility mode.</em></p>
{% endif %}

{{ heading("Quotes") }}
<div class="row">
<div class="col-md-6 col-sm-12 p-5">
<pre class="block-compact">&gt; This is a quote.
&gt; It can span multiple lines!
&gt;&gt; And multiple levels.
&gt;&gt; *<em>With markdown syntax.</em>*</pre>
</div>
<div class="col-md-6 col-sm-12 page p-5">
<blockquote class="m-t-0" style="margin-block-start: 0"><p style="margin-block-start: 0">This is a quote.
It can span multiple lines!</p>
<blockquote style="margin-block-start: 0"><p style="margin-block-start: 0">And multiple levels.</br>
<em>With markdown syntax.</em></p>
</blockquote>
</blockquote>
</div>
</div>

{{ heading("Images") }}
<p>You can copy n paste images directly into the editor, they will be uploaded as attachments.</p>
<pre class="block-compact">![](http://www.example.com/image.jpg)</pre>
<p>Check the attachments of a page, there are links for copy'n'paste.</p>

{{ heading("Tables") }}

<div class="row">
<div class="col-md-6 col-sm-12 p-5">
<pre class="block-compact">| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| John     | Doe      | Peach    |
| Mary     | Smith    | Banana   |</pre>
</div>
<div class="col-md-6 col-sm-12 p-5 page">
<table>
<thead><tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>Peach</td>
</tr>
<tr>
<td>Mary</td>
<td>Smith</td>
<td>Banana</td>
</tr>
</tbody>
</table>
</div>
</div>

{{ heading("Code") }}

<div class="row">
<div class="col-md-6 col-sm-12 p-5">
<pre class="block-compact text-wrap">Inline code `int n = 1` with backticks.</pre></div>
<div class="col-md-6 col-sm-12 p-5">
Inline code <code>int n = 1</code> with backticks.
</div>
</div>


<div class="row">
<div class="col-md-6 col-sm-12 p-5">
<pre>```
Code Blocks
```</pre></div>
<div class="col-md-6 col-sm-12 p-5">
<pre>Code Blocks</pre>
</div>
</div>


<div class="row">
To add syntax highlighting, specify a language next to the backticks before the fenced code block.
</div>

<div class="row">
<div class="col-md-6 col-sm-12 p-5">
<pre class="block-compact">```python
#!/usr/bin/env python
assert 1 + 1 == 2
print("Hello World!")
```</pre>
</div>
<div class="col-md-6 col-sm-12 p-5">
<div class="highlight"><pre class="block-compact"><span></span><span class=".highlight ch">#!/usr/bin/env python</span>
<span class=".highlight k">assert</span> <span class=".highlight mi">1</span> <span class=".highlight o">+</span> <span class=".highlight mi">1</span> <span class=".highlight o">==</span> <span class=".highlight mi">2</span>
<span class=".highlight nb">print</span><span class=".highlight p">(</span><span class=".highlight s2">&quot;Hello World!&quot;</span><span class=".highlight p">)</span>
</pre></div>
</div>
</div>

<div class="row">
To enable line numbers in the code block, append an equal sign <code>=</code> to the language.
</div>
<div class="row">
<div class="col-md-6 col-sm-12 p-5">
<pre class="block-compact">```python=
print("Hello Line Numbers!")
```</pre>
</div>
<div class="col-md-6 col-sm-12">
<div class="highlight"><table class="highlighttable"><tbody><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal">1</span></pre></div></td><td class="code"><pre class="code"><span class=".highlight nb">print</span><span class=".highlight p">(</span><span class=".highlight s2">"Hello Line Numbers!"</span><span class=".highlight p">)</span>
</pre></td></tr></tbody></table></div>
</div>
</div>

{{ heading("Mathjax") }}

<div class="row">
<div class="col-md-6 col-sm-12 p-5">
<pre class="block-compact text-wrap">Inline math: `$a^2+b^2=c^2$`</pre></div>
<div class="col-md-6 col-sm-12 p-5">
Inline Math: \(a^2+b^2=c^2\)
</div>
</div>

<div class="row">
<div class="col-md-6 col-sm-12 p-5">
  <pre class="block-compact">
Math block:
```math
a^2+b^2=c^2
```
</pre>
</div>
<div class="col-md-6 col-sm-12 p-5">
Math block:</br>
\[a^2+b^2=c^2\]
</div>
</div>

\(\TeX\) like syntax:

<div class="row">
<div class="col-md-6 col-sm-12 p-5">
<pre class="block-compact">
Inline Math: $a^2+b^2=c^2$
</pre>
</div>
<div class="col-md-6 col-sm-12 p-5">
Inline Math: \(a^2+b^2=c^2\)
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 p-5">
<pre class="block-compact">
Equation:
$$a^2+b^2=c^2$$
</pre>
</div>
<div class="col-md-6 col-sm-12 p-5">
\[a^2+b^2=c^2\]
</div>
</div>

{{ heading("Footnotes") }}

<div class="row">
<div class="col-md-6 col-sm-12 p-5">
<pre class="block-compact">
Footnote identifiers[^1] are single characters
or words[^bignote]. And can be referenced
multiple[^1] times.

[^1]: Footnotes can be a single line.

[^bignote]: Or more complex.

    Indent paragraphs to include them
    in the footnote.

    Add as many paragraphs as you like.
</pre>
</div>
<div class="col-md-6 col-sm-12 p-5">
Footnote identifiers<sup class="footnote-ref" id="fnref-1"><a href="#fn-1">1</a></sup> are single characters or words<sup class="footnote-ref" id="fnref-2"><a href="#fn-2">2</a></sup>. And can be referenced multiple<sup class="footnote-ref" id="fnref-1"><a href="#fn-1">1</a></sup> times.
<hr/>
<section class="footnotes">
<ol>
<li id="fn-1" style="font-size: 1.2rem;"><i class="fas fa-long-arrow-alt-up"></i> <a href="#fnref-1" class="footnote">a</a>, <a href="#fnref-3" class="footnote">b</a> Footnotes can be a single line.</li>
<li id="fn-bignote" style="font-size: 1.2rem;"><a href="#fnref-2" class="footnote"><i class="fas fa-long-arrow-alt-up"></i></a><p style="display:inline; font-size: 1.2rem;"> Or more complex.</p>
<p style="font-size: 1.2rem;">Indent paragraphs to include them
in the footnote.</p>
<p style="font-size: 1.2rem;">Add as many paragraphs as you like.</p></li>
<li id="fn-x-clacks-overhead" style="font-size: 1.2rem;"><a href="#" class="footnote"><i class="fas fa-long-arrow-alt-up"></i></a> GNU Terry Pratchett.</li>
</ol>
</section>
</div>
</div> {# row #}

{{ heading("Abbreviations") }}

Defining abbreviations allows tooltips to display when hovering on those abbreviations

<div class="row">
<div class="col-md-6 col-sm-12 p-5">
<pre>
The HTML specification is maintained by the W3C.
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium</pre></div>

<div class="col-md-6 col-sm-12 p-5">
<p>The <abbr title="Hyper Text Markup Language">HTML</abbr> specification
is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p>
</div>
</div>

{{ heading("Blocks") }}

These special blocks are not part of the markdown standard, but
are helpful for structuring content.

<h4>Fancy blocks</h4>
<div class="row">
<div class="col-md-6 col-sm-12 p-5">
<pre class="block-compact">
::: info
# Head of the block.
With _formatted_ content.
:::
</pre>
</div>
<div class="col-md-6 col-sm-12 p-5">
<div class="alert alert-primary mb-10"><h4 class="alert-heading">Head of the block</h4>
With <em>formatted</em> content.</div>
</div>
</div> {# row #}
Block styles available: <span class="alert alert-primary text-monospace" style="padding: 0.2rem">info</span>, <span class="alert alert-success text-monospace" style="padding: 0.2rem">success</span>, <span class="alert alert-secondary text-monospace" style="padding: 0.2rem">warning</span>, <span class="alert alert-danger text-monospace" style="padding: 0.2rem">danger</span> and <span class="alert text-monospace" style="padding: 0.2rem">none</span>.

<h4>Spoiler blocks</h4>
<div class="row my-20">
<div class="col-md-6 col-sm-12">
<pre class="block-compact">
&gt;! Spoiler blocks reveal their
&gt;! content on click on the icon.
</pre>
</div>
<div class="col-md-6 col-sm-12 pl-5">
    <div class="spoiler">
      <button class="spoiler-button"><i class="far fa-eye-slash"></i></button>
    </div>
</div>
</div>

<h4>Folded blocks</h4>
<div class="row my-20 h-100">
<div class="col-md-6 col-sm-12">
<pre class="block-compact">
&gt;| # Headline is used as summary
&gt;| with the details folded.
</pre>
</div>
<div class="col-md-6 col-sm-12 pl-5">
<details class="collapse-panel">
<summary class="collapse-header">
Headline is used as summary
</summary>
<div class="collapse-content"><p>with the details folded.</p></div></details>
</div>
</div>

<h4>Alerts</h4>
<div class="row">
<div class="col-md-6 col-sm-12 p-5">
<pre class="block-compact">
&gt; [!NOTE]
&gt; Useful for highlighting special
&gt; information.
</pre>
</div>
<div class="col-md-6 col-sm-12 p-5">
<div class="quote-alert quote-alert-note" style="margin:0;"><div class="quote-alert-header"><i class="fas fa-info-circle"></i> Note</div><p>Useful for highlighting special information.</p></div>
</div>
</div> {# row #}
Alerts available: <code>[!NOTE]</code>, <code>[!TIP]</code>, <code>[!IMPORTANT]</code>, <code>[!WARNING]</code> and <code>[!CAUTION]</code>.

{{ heading("Diagrams") }}

Using <a href="https://mermaid.js.org/">Mermaid</a> you can create diagrams and visualizations in your wiki pages.
<div class="row">
<div class="col-md-6 col-sm-12 p-5">
<pre class="block-compact">
```mermaid
flowchart LR
  A[An Otter Wiki]-- supports ---Mermaid
```
</pre>
</div>
<div class="col-md-6 col-sm-12 p-5">
<style type="text/css">
    .example-light { display: block; }
    .dark-mode .example-light { display: none; }
    .example-dark { display: none; }
    .dark-mode .example-dark { display: block; }
</style>
<img class="example-light" src="{{ url_for("static", filename="img/mermaid-example-light.svg")}}">
<img class="example-dark" src="{{ url_for("static", filename="img/mermaid-example-dark.svg")}}">

</div>
</div> {# row #}

Mermaid support all kinds of diagrams: flowcharts, class diagrams, pie charts, mindmaps, etc. For more information see the <a href="https://mermaid.js.org/intro/syntax-reference.html">Mermaid Documentation</a>.

{{ heading("Remark") }}
There's actually a lot more to Markdown than this. See the official
<a href="http://daringfireball.net/projects/markdown/basics">introduction</a> and
<a href="http://daringfireball.net/projects/markdown/syntax">syntax</a> for more information.

Please Note: An Otter Wiki is not using the official implementation. This might lead to small differences in the little things.
